import React, { useState, useEffect } from 'react'
import './index.scss'
import { Radio, Button } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';


export default function Themebounced(props) {
    const settings = JSON.parse(localStorage.getItem('settings')) || {};
    const [designW, setdesignW] = useState(1920);
    const [designH, setdesignH] = useState(1080);
    const [valuezoom, setValuezoom] = useState('stretch');
    const [colors, setcolors] = useState('default');
    const [WeatherPeriod, setWeatherPeriod] = useState(5);
    const [chartRePeriod, setchartRePeriod] = useState(10);
    const [hideGesture, sethideGesture] = useState(false);

    const getCfg = () => {
        setdesignW(settings.designW || 1920) //设计图宽度
        setdesignH(settings.designH || 1080) //设计图高度
        setValuezoom(settings.zoomMode || 'stretch')
        setWeatherPeriod(settings.getWeatherPeriod || 5) //天气预报更新周期（分）
        setchartRePeriod(settings.chartRefreshPeriod || 10) // 图表刷新周期（秒）
        setcolors(settings.colors || 'default')
        sethideGesture(settings.hideGesture || false)
        console.log(`settings`, settings);
    };

    const toggleRe = () => {

        let Cfg = {
            designW: designW,
            designH: designH,
            zoomMode: valuezoom,
            getWeatherPeriod: WeatherPeriod, //天气更新频率
            chartRefreshPeriod: chartRePeriod, //图表刷新频率
            colors: colors,
            colorData: {//配色方案，部分色彩参考 http://rmco.jp/coloringroom/haisyoku_rei/haisyoku_haru.html
                default: ['lightskyblue', 'orange', 'greenyellow', 'limegreen',
                    'mediumturquoise', 'mediumpurple'],
                spring: ['#BEDC6E', '#FA8C8C', '#FAAAC8', '#FAC8C8',
                    '#FFFFE6', '#6E6464'],
                summer: ['#FFAE00', '#FF5200', '#007AFF', '#00BF05',
                    '#DCFFFF', '#505064'],
                autumn: ['#c1ad2f', '#A5912D', '#782323', '#783723', '#A05027',
                    '#FAE6DC', '#283C14'],
                winter: ['#F5F5FA', '#96822D', '#6E5A19', '#BECDEB',
                    '#E1E1F0', '#281E1E'],
            },
            hideGesture: hideGesture  //优化状态

        };
        window.localStorage.setItem('settings', JSON.stringify(Cfg))

        window.location.reload()

    }
    const gethideGesture = (e) => {
        // console.log(`e`, e);
        // console.log(`e`, e.target);
        // console.log(`e`, e.target.checked);
    }
    useEffect(() => {
        getCfg()
        const settings = JSON.parse(localStorage.getItem('settings')) || {};
        let Cfg = {
            designW: settings.designW || 1920,
            designH: settings.designH || 1080,
            zoomMode: settings.zoomMode || 'stretch',
            getWeatherPeriod: settings.getWeatherPeriod || 5, //天气更新频率
            chartRefreshPeriod: settings.chartRefreshPeriod || 10, //图表刷新频率
            colors: settings.colors || 'default',
            colorData: {//配色方案，部分色彩参考 http://rmco.jp/coloringroom/haisyoku_rei/haisyoku_haru.html
                default: ['lightskyblue', 'orange', 'greenyellow', 'limegreen',
                    'mediumturquoise', 'mediumpurple'],
                spring: ['#BEDC6E', '#FA8C8C', '#FAAAC8', '#FAC8C8',
                    '#FFFFE6', '#6E6464'],
                summer: ['#FFAE00', '#FF5200', '#007AFF', '#00BF05',
                    '#DCFFFF', '#505064'],
                autumn: ['#c1ad2f', '#A5912D', '#782323', '#783723', '#A05027',
                    '#FAE6DC', '#283C14'],
                winter: ['#F5F5FA', '#96822D', '#6E5A19', '#BECDEB',
                    '#E1E1F0', '#281E1E'],
            },
            hideGesture: settings.hideGesture || false  //优化状态

        };
        window.localStorage.setItem('settings', JSON.stringify(Cfg))
    }, []);
    return (
        <div className='left-bottom'>
            <div>
                <div className='shezhi'>
                    设置
                </div>
                <div className='setImg'>
                    <li>设计图</li>
                    <li>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>宽(像素):</span> <span></span>
                        <input type="number" value={designW} onChange={(e) => setdesignW(e.target.value)} />
                        <span>         </span>
                        <span>高(像素):</span> <span></span>
                        <input type="number" value={designH} onChange={(e) => setdesignH(e.target.value)} />
                    </li>
                </div>
                <div className='suo'>
                    <li>缩放模式</li>
                    <li>
                        <input type="radio" onChange={(e) => { setValuezoom(e.target.id) }} name="suofang" id="contain" checked={valuezoom === 'contain' ? true : false} /><label htmlFor="contain">contain</label>
                        <input type="radio" onChange={(e) => { setValuezoom(e.target.id) }} name="suofang" id="cover" checked={valuezoom === 'cover' ? true : false} /><label htmlFor="cover">cover</label>
                        <input type="radio" onChange={(e) => { setValuezoom(e.target.id) }} name="suofang" id="stretch" checked={valuezoom === 'stretch' ? true : false} /><label htmlFor="stretch">stretch</label>
                    </li>
                </div>
                <div className='colorFun'>
                    <li>配色方案</li>
                    <li>
                        <input type="radio" name="peise" id="default" onClick={(e) => { setcolors(e.target.id) }} checked={colors === 'default' ? true : false} /><label htmlFor="default">default</label>
                        <input type="radio" name="peise" id="spring" onClick={(e) => { setcolors(e.target.id) }} checked={colors === 'spring' ? true : false} /><label htmlFor="spring">spring</label>
                        <input type="radio" name="peise" id="summer" onClick={(e) => { setcolors(e.target.id) }} checked={colors === 'summer' ? true : false} /><label htmlFor="summer">summer</label>
                        <input type="radio" name="peise" id="autumn" onClick={(e) => { setcolors(e.target.id) }} checked={colors === 'autumn' ? true : false} /><label htmlFor="autumn">autumn</label>
                        <input type="radio" name="peise" id="winter" onClick={(e) => { setcolors(e.target.id) }} checked={colors === 'winter' ? true : false} /><label htmlFor="winter">winter</label>
                    </li>
                </div>
                <div className='other'>
                    <li>其他</li>
                    <li>
                        天气更新频率(分钟):
                        <input type="number" value={WeatherPeriod} onChange={(e) => setWeatherPeriod(e.target.value)} />
                    </li>
                    <li>
                        图表刷新频率(秒):
                        <input type="number" value={chartRePeriod} onChange={(e) => setchartRePeriod(e.target.value)} />
                    </li>
                    <li className='optimize'>
                        <input type='checkbox'  onChange={(e) => sethideGesture(e.target.checked)} />
                        <label htmlFor="low-resolution">低分辩率优化</label>
                    </li>
                </div>
                <button onClick={
                    () => {
                        toggleRe()
                    }
                }>保存并刷新</button>
            </div>
            <div></div>
        </div>
    )
}
